<template>
    <div class="wg-wrapper">
      <v-title ref="title" class="v-title"><span slot="title-name">姓名五格</span></v-title>
      <div class="wg-container" ref="container">
        <!-- 五格查询 -->
        <div class="wg-form-wrapper" v-show="!showResult">
          <p class="wg-form-title tc">请输入您的姓名</p>
          <div class="firstname-wrapper input-wrapper">
            <label for="firstname">姓氏</label>
            <input type="text" id="firstname" placeholder="请输入姓氏" class="tc" v-model="firstname">
          </div>
          <div class="lastname-wrapper input-wrapper">
            <label for="lastname">名字</label>
            <input type="text" id="lastname" placeholder="请输入名字" class="tc" v-model="lastname">
          </div>
          <p class="confirm-btn" @click="getWg"></p>
        </div>
        <!-- 五格查询结果 -->
        <div class="wu-result-wrapper" v-show="showResult">
          <div class="result pr" ref="result">
            <ul>
              <li v-for="item in data.ming" class="pr word" ref="li">{{item.TChar}}<span class="pa">{{item.Strokes}}</span></li>
              <li v-for="item in data.xing" class="pr">{{item.TChar}}<span class="pa">{{item.Strokes}}</span></li>
            </ul>
            <!-- 五格位置 -->
            <div class="g-wrapper pa tg" v-if="data.heaven">
              <span class="g-name inline tg-name">天格</span>
              <span class="g-num inline tg-num" :class="{'good':JX[data.heaven.num].destiny === '吉'}">{{data.heaven.num}}</span>
              <span class="g-ele inline tg-ele" :class="'ele'+data.heaven.element"></span>
            </div>
            <div class="g-wrapper pa rg" v-if="data.heaven">
              <span class="g-name inline rg-name">人格</span>
              <span class="g-num inline rg-num" :class="{'good':JX[data.human.num].destiny === '吉'}">{{data.human.num}}</span>
              <span class="g-ele inline rg-ele" :class="'ele'+data.human.element"></span>
            </div>
            <div class="g-wrapper pa dg" v-if="data.heaven">
              <span class="g-name inline dg-name">地格</span>
              <span class="g-num inline dg-num" :class="{good:JX[data.earth.num].destiny === '吉'}">{{data.earth.num}}</span>
              <span class="g-ele inline dg-ele" :class="'ele'+data.earth.element"></span>
            </div>
            <div class="g-wrapper pa zg" v-if="data.heaven">
              <span class="g-name inline zg-name">总格</span>
              <span class="g-num inline zg-num" :class="{'good':JX[data.total.num].destiny === '吉'}">{{data.total.num}}</span>
              <span class="g-ele inline zg-ele" :class="'ele'+data.total.element"></span>
            </div>
            <div class="g-wrapper pa wg" v-if="data.heaven">
              <span class="g-name inline wg-name">外格</span>
              <span class="g-num inline wg-num" :class="{'good':JX[data.external.num].destiny === '吉'}">{{data.external.num}}</span>
              <span class="g-ele inline wg-ele" :class="'ele'+data.external.element"></span>
            </div>
          </div>
          <div class="wx-img"></div>
        </div>
      </div>
    </div>
</template>

<script>
    import Title from '@/components/title/Title'
    import AsyncJson from '@/common/js/async'
    import Toast from '@/common/js/toast'
    import JX from '@/common/js/jx'

    export default {
        name: "Wg",
        data() {
            return {
              firstname:"",
              lastname:"",
              showResult:false,
              data:{},
              JX:JX
            }
        },
        components:{
          "v-title":Title
        },
        methods: {
          setHeight(){
            this.$refs.container.style.minHeight = document.documentElement.clientHeight - this.$refs.title.$el.clientHeight + "px";
          },
          getWg(){
            if(!this.firstname.replace(/\s+/g,"") || !this.lastname.replace(/\s+/g,"")){
              Toast("请将信息填写完整");
              return;
            }
            if(this.firstname.replace(/\s+/g,"").length + this.lastname.replace(/\s+/g,"").length > 4){
              Toast("姓名总长不能超过四个字");
              return;
            }
            AsyncJson("POST","name/fivestructures",
              {
                lastname:this.lastname.replace(/\s+/g,""),
                firstname:this.firstname.replace(/\s+/g,""),
              }
            ).then( res => {
              if(res.status === "000"){
                this.data = res.data.fivestructures;
                this.showResult = true;
                // console.log(res.data);
                this.$nextTick(() => {
                  this.setPosition(this.data);
                });
              }else{
                Toast(res.data);
              }
            }).catch( err => {
              console.log(err);
            })
          },
          setPosition(data){
            let th = this.$refs.result.clientHeight;// 整个名字的高度
            let gh = document.getElementsByClassName("g-wrapper")[0].clientHeight;// 单个命格的高度
            let lh = this.$refs.li[0].clientHeight;// 单字的高度
            let mt = lh/3;// 单字的 marginBottom
            document.getElementsByClassName("wg")[0].style.top = (th-gh)/2 + "px";
            if(data.xing.length === 1){
              // 天 最上
              document.getElementsByClassName("tg")[0].style.top = 0;
              if(data.ming.length === 1){
                // 姓 1
                // 人  中间
                document.getElementsByClassName("rg")[0].style.top = (th-gh)/2 + "px";
              }else if(data.ming.length === 2){
                // 姓 2
                // 人 第二个字 第三个字 中间
                document.getElementsByClassName("rg")[0].style.top = (lh*2+mt+mt/2) + "px";
              }
            }else if(data.xing.length === 2){
              if(data.ming.length === 1) {
                // 姓 1
                // 天 第一个字底部
                document.getElementsByClassName("tg")[0].style.top = lh + "px";
                // 人 第二字底部
                document.getElementsByClassName("rg")[0].style.top = (lh*2+mt) + "px";
              }else if(data.ming.length === 2) {
                // 姓 2
                // 天 第二字底部
                document.getElementsByClassName("tg")[0].style.top = (lh*2+mt) + "px";
                // 人 第三个字底部
                document.getElementsByClassName("rg")[0].style.top = (lh*3+mt*2) + "px";
              }
            }else if(data.xing.length === 3){
              if(data.ming.length === 1) {
                // 姓 1
                // 天 第一个字底部
                document.getElementsByClassName("tg")[0].style.top = lh + "px";
                // 人 第二字底部
                document.getElementsByClassName("rg")[0].style.top = (lh*2+mt) + "px";
              }
            }
          }
        },
        mounted(){
          this.setHeight();
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .wg-wrapper
    padding-top 100px
    .wg-container
      background url("./wu-bg.png") no-repeat center center
      background-size cover
      .wg-form-wrapper
        .wg-form-title
          padding-top 130px
          font-size 34px
          color #282828
          margin-bottom 54px
        .input-wrapper
          padding-left 58px
          margin-bottom 40px
          &.lastname-wrapper
            margin-bottom 0
          label
            font-size 34px
            margin-right 18px
            color #282828
          input
            width 500px
            font-size 34px
            outline none
            border none
            padding 20px 0
            &::-webkit-input-placeholder
              color #828282
              font-size 34px
        .confirm-btn
          width 400px
          height 60px
          margin 70px auto 0
          background url("./confirm-btn.png") no-repeat center center
          background-size cover
      .wu-result-wrapper
        padding-top 64px
        .result
          width 122px
          margin 0 auto
          ul
            li
              width 122px
              height 120px
              text-align center
              line-height 120px
              margin-bottom 40px
              background url("./fang-gray.png") no-repeat center center
              background-size cover
              font-size 85px
              span
                width 58px
                height 58px
                border-radius 50%
                background #f8c323
                text-align center
                line-height 58px
                font-size 14px
                transform scale(0.5)
                transform-origin center center
                top -28px
                right -28px
        .g-wrapper
          font-size 0
          width 145px
          &.tg
            right -170px
          &.rg
            right -170px
          &.dg
            right -170px
            bottom -10px
          &.wg
            left -170px
          &.zg
            right -13px
          .g-name
            font-size 28px
            margin-right 9px
            height 33px
            line-height 33px
          .g-num
            margin-right 6px
            font-size 20px
            color #ffffff
            width 33px
            height 33px
            border-radius 50%
            background #e12323
            text-align center
            line-height 33px
            &.good
              background #32b16c
          .g-ele
            width 33px
            height 33px
            &.ele1
              background url("./xing1.png") no-repeat center center
              background-size cover
            &.ele2
              background url("./xing2.png") no-repeat center center
              background-size cover
            &.ele3
              background url("./xing3.png") no-repeat center center
              background-size cover
            &.ele4
              background url("./xing5.png") no-repeat center center
              background-size cover
            &.ele5
              background url("./xing5.png") no-repeat center center
              background-size cover
        .wx-img
          width 196px
          height 278px
          margin 122px auto 0
          background url("./wx.png") no-repeat center center
          background-size cover
</style>
